<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8"/>
    <title>SkillAPI - Dynamic Editor</title>

    <!-- other scripts are loaded in main.js -->
    <script src="editor/js/loader.js"></script>
    <script src="editor/js/main.js"></script>

    <link rel="stylesheet" href="editor/builderStyle.css"/>
    <link rel="stylesheet" href="editor/style.css"/>
    <link rel="stylesheet" href="editor/tooltips.css"/>

</head>

<body>

<!-- Site header -->
<header>
    <h1>Skill API</h1>
    <h2>Dynamic Editor</h2>
</header>

<div id="version">
    <label for="version-select">
        Server
    </label>
    <select id="version-select">
        <option>1.12</option>
    </select>
</div>

<!-- IO Buttons -->
<div id="io">
    <p class="ioText">Drop file anywhere to load</p>
    <button id="saveButton" class="ioButton">Backup All Data</button>
</div>

<!-- Display when the window is too small -->
<div id="small">
    <p>Please enlarge your browser window or zoom out</p>
</div>

<div id="main">

    <!-- Skill/Class Tabs -->
    <div id="tabSpacer"></div>
    <div id="skillTab" class="tab tabLeft tabActive">
        Skills
    </div>
    <div id="classTab" class="tab tabRight">
        Classes
    </div>

    <!-- Skill Content -->
    <div id="skills">

        <!-- Skill list -->
        <select id="skillList" size="30">
            <option selected="selected">Skill 1</option>
            <option>+ New Skill</option>
        </select>

        <!-- Effect builder -->
        <div id="builder">
            <h6 id="skillDetails">Details</h6>
            <h6 id="addTrigger">Triggers</h6>
            <h6 id="saveSkill" class>Save Skill</h6>
            <h6 id="deleteSkill" class="cancelButton">Delete</h6>
            <div id="builderContent"></div>
        </div>

        <!-- Component editor -->
        <div id="skillForm">
        </div>

        <!-- Trigger selection -->
        <div id="triggerChooser">
            <h4>Triggers</h4>

            <div id="triggerOptions"></div>

            <h5 class="cancelButton">Cancel</h5>
        </div>

        <!-- Component selection -->
        <div id="componentChooser">

            <h4>Targets</h4>
            <div id="targetOptions"></div>

            <h4>Conditions</h4>
            <div id="conditionOptions"></div>

            <h4>Mechanics</h4>
            <div id="mechanicOptions"></div>

            <hr/>
            <h5 class="cancelButton">Cancel</h5>

        </div>
    </div>

    <!-- Class Content -->
    <div id="classes">

        <!-- Class list -->
        <select id="classList" size="30">
            <option selected="selected">Class 1</option>
            <option>+ New Class</option>
        </select>

        <div id="classForm"></div>
    </div>

</div>

<!-- Site footer -->
<footer>
    <a id="rayhughes">枫溪特供版本</a>
</footer>

<div id="badBrowser">
    <p>Get a real browser! (Use Chrome or Firefox)</p>
</div>
</body>

</html>
